<template>
<div>
    <ButtonGroup>
        <Button @click="changeType(1)" :class="{active : formValidate.type ===1}" >新闻分类</Button>
        <Button @click="changeType(2)" :class="{active : formValidate.type ===2}">上传分类</Button>
        <Button @click="changeType(3)" :class="{active : formValidate.type ===3}">产品分类</Button>
    </ButtonGroup>
    <Tree :data="baseData" @on-select-change="getParentId"></Tree>
    <Button type="primary" @click="addRoot">添加根节点</Button>
    <Button type="primary" @click="modal2=true">添加子节点</Button>
    <Button type="primary" @click="edit">修改</Button>
    <Button type="primary" @click="remove">删除</Button><br>

    
    <Modal
        v-model="modal1"
        title="温馨提醒"
        @on-ok="ok"
        @on-cancel="cancel">
        <p>您确定要删除吗</p>
    </Modal>
    <Modal v-model="modal2" @on-ok="submitForm" @on-cancel="cancel">
        <form>
            parentId:<input type="text"  name="parentId" id="parentId" v-model="formValidate.parentId" style="width:200px">
            <div style="margin-bottom:20px;">
                分类名称：<input name="text" style="width:20%" v-model="formValidate.title"/>
            </div>
        </form>
        <div>
            <!-- <Button style="width:80px" @click="submitForm">Submit</Button> -->
            <Button style="width:80px">Clear</Button>
        </div>
    </Modal>
</div>
</template>
<script>
    export default {
        data () {
            return {
                modal1: false,
                modal2:false,
                editmode:false,
                baseData: [],
                formValidate:{
                    title:'',
                    type:1,
                    parentId:'',
                }
            }
        },
        methods:{
            changeType(type){
                this.formValidate.type=type;
                this.$http({
                    url:'http://localhost:3000/cate/list/'+type,
                    method:'get'
                }).then(res=>{
                    this.baseData=res.data;
                })
            },
            getParentId(selcetion){
                    this.formValidate.parentId=selcetion[0]._id;
            },
            addRoot(){
                this.formValidate.parentId='';
                this.modal2=true;
            },
            edit(){
                this.editmode=true;
                 this.modal2=true;
            },
            submitForm(){
                var postUrl='';
                if(!this.editmode){
                    if(this.formValidate.parentId !=''){
                            postUrl='http://localhost:3000/cate/data';
                            
                        }else{
                            postUrl='http://localhost:3000/cate/data';
                            this.formValidate.parentId=null;

                        }
                        this.$http({
                            url:postUrl,
                            method:'Post',
                            data:this.formValidate
                        }).then((response) => { 
                             this.changeType(this.formValidate.type);
                             this.$Message.info('添加成功');
                    })
                }else{
                    if(this.formValidate.parentId !='')
                    {
                        postUrl='http://localhost:3000/cate/data/'+this.formValidate.parentId;
                        this.$http({
                            url:postUrl,
                            method:'Post',
                            data:{title:this.formValidate.title}
                        }).then((response) => { 
                            this.editmode=false;
                            this.$Message.info('修改成功');
                             this.changeType(this.formValidate.type);
                    })
                    }
                }
               
            },
            remove(){
                this.modal1=true
            },
            ok(){
               var  postUrl='http://localhost:3000/cate/data/'+this.formValidate.parentId;
                this.$http({
                            url:postUrl,
                            method:'delete',
                           
                        }).then((response) => { 
                           
                            this.changeType(this.formValidate.type);
                    })
            },
            cancel(){
                this.$Message.info('点击了取消');
            }

        },
        created(){
            this.changeType(1);
        }
        
    }
</script>
<style lang="scss" scoped>
    .active{
        background:#2d8cf0;
        color:#fff;
        
    }
</style>
